<template>
    <el-container>
      <el-header
        style="background-color: #363636; height: 60px; padding-top: 10px"
      >
        <el-row>
          <el-button
            type="text"
            @click="home()"
            style="
              color: #409eff;
              float: left;
              margin-left: 20px;
              font-size: 20px;
            "
            >Home</el-button
          >
          <el-button
            type="text"
            @click="logout()"
            style="color: red; float: right; margin-right: 20px"
            >注销</el-button
          >
          <el-button
            type="text"
            @click="like()"
            style="color: white; float: right; margin-right: 20px"
            >购物车</el-button
          >
        </el-row>
      </el-header>
      <el-main style="width: 80%; margin-left: 10%">
        <span style="font-size: 25px;float:left;">我的购物车</span>
        <el-row v-for="ps in products" type="flex" style="margin-top: 50px;">
          <el-col
            v-for="product in ps"
            :key="product.price"
            style="margin: 5px; width: 25%"
          >
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px">
                <img
                  :src="product.pic"
                  class="image"
                  @click="selectItem(product)"
                />
                <div 
                @click="selectItem(product)"
                >
                  <span>{{ product.stitle }}</span>
                  <br />
                  <span style="color: #cd2626">￥ {{ product.price }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import store from "../store";
  
  export default {
    name: "Home",
    data() {
      return {
        houseArea: "",
        price_1: "",
        price_2: "",
        products: [],
        activeIndex: "1",
      };
    },
    mounted: function () {
      this.search(); //页面加载时自动执行
    },
    methods: {
      selectItem(item) {
        this.$router.push({
          name: "Detail",
          params: {
            product: item,
          },
        });
      },
      handleSelect(key, keyPath) {
        this.activeIndex = key.toString();
        this.search();
      },
      home() {
        this.$router.push("/home");
      },
      logout() {
        this.$router.push("/");
      },
      search() {
        this.$apiFun
          .getLike()
          .then((response) => {
            if (response["success"]) {
              this.products.splice(0, this.products.length);
              var list = response.data;
              var r = list.length / 4;
              for (var i = 0; i < r; i++) {
                var index = i * 4;
                var l = 4;
                var ps = [];
                for (; index < list.length; index++) {
                  var p = list[index];
                  var maxLen = 10;
                  p.stitle = p.title
                  if (p.title && p.title.length > maxLen)
                    p.stitle = p.title.substring(0, maxLen) + "...";
                  ps.push(p);
                  l--;
                  if (l == 0) {
                    break;
                  }
                }
                this.products.push(ps);
              }
              this.products.splice(0, 0);
            } else {
              alert(response["msg"]);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
  </script>
  <style>
  .image {
    width: 200px;
    height: 200px;
  }
  </style>
  